<template>
  <div class="ManagerList">
    <el-row>
      <el-button type="success" @click="edit(1)">+添加管理员</el-button>
    </el-row>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="480px"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" text-align="center">
      </el-table-column>
      <el-table-column prop="username" label="用户名">

      </el-table-column>
      <el-table-column prop="realname" label="姓名">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号">
      </el-table-column>
      <el-table-column prop="dateLogin" label="登录时间">
      </el-table-column>
      <el-table-column prop="ipLogin" label="登录IP">
      </el-table-column>
      <el-table-column prop="address" label="状态">
        <template slot-scope="{row}">
          <el-tag type="success" v-if="!row.islock">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>

      </el-table-column>
      <el-table-column prop="address" label="操作" width="300" style="text-align:center">
        <template slot-scope="{row}">
          <!-- 禁用和启用绑定数据里islock的值来控制显示隐藏 -->
          <el-button type="text" style="color:#409eff" @click="edit(row)"> {{ row.date }}编辑</el-button>
          <el-button type="text" style="color:orange">重置密码</el-button>
          <el-button type="text" style="color:red" v-if="!row.islock">禁用</el-button>
          <el-button type="text" style="color:red" v-else @click="disable(row)">启用</el-button>

          <el-button type="text" style="color:red" @click="del(row)">删除</el-button>
        </template>


      </el-table-column>
    </el-table>
    <el-button type="danger" @click="delAll">批量删除</el-button>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!--弹窗 Form -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :rules="rules">
      <el-form :model="form" ref="ruleForm">
        <el-form-item label="用户名">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" v-show="xian">
          <el-input v-model="form.pwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户编号">
          <el-input v-model="form.uid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-checkbox-group v-model="form.roleIds">
            <el-checkbox :label="item.id" v-for="item in juese" :key="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
<script>
import { rootguanli, rootmodify, rootguanliList, rootdelganli } from "@/api/index"

export default {
  name: 'ManagerList',
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      xian:true,
      limit: {
        page: 1,
        pageSize: 10
      },
      juese: [],

      currentPage: 1,
      total: 10,
      title: "",
      dialogFormVisible: false,
      form: {
        username: "",
        pwd: "",
        realname: "",
        mobile: "",
        userId: "",
        roleIds: []
      },
      formLabelWidth: '120px',
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },],
            }
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 请求接口获取后端数据
    async getAdminlist(params) {
      let { data: res } = await rootguanli(params)
      this.tableData = res.result
      this.total = res.totalRow

    },
    handleSizeChange(val) {
      // 选择多少条信息时 获取条数参数 重新请求接口,且把当前所在的页数默认为1
      console.log(`每页 ${val} 条`);
      this.limit.pageSize = val
      this.currentPage = 1
      this.limit.page = 1
      this.getAdminlist(this.limit)
    },
    handleCurrentChange(val) {
      // 获取到当前页 赋值给page 传给后端请求数据
      console.log(`当前页: ${val}`);
      this.currentPage = val

      this.limit.page = val
      this.getAdminlist(this.limit)

    },

    async rootguanliLists() {
      let { data: res } = await rootguanliList()
      this.juese = res
    },

    // 添加提交
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.rootmodifys(this.form)
        }
      })
      this.dialogFormVisible = false
    },
    // 管理 添加 修改
    async rootmodifys(params) {
      let data = await rootmodify(params)
      if (data.msg === "success") {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      } else {
        this.$message.error(data.msg);
      }
    },
    // 编辑
    edit(v) {
      if (v == 1) {
        this.xian=false
        // 添加
        this.title = "添加"
        this.form = {
          realname: "",
          username: "",
          id: "",
          mobile: "",
          uid: "",
          roleIds: []
        }
      } else {
        // 修改
        this.xian=true
        this.title = "修改"
        this.form=v
        console.log(v);
        
      }
      this.rootguanliLists()
      this.dialogFormVisible = true
    },

    // 删除
    del(row) {
      this.rootdelganlis({
        id: row.id
      })
    },
    // // 删除接口
    async rootdelganlis(params) {
      let data = await rootdelganli(params)
      if (data.msg === "success") {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      } else {
        this.$message.error(data.msg);
      }
    },

    // 批量删除
    delAll() {
      // 后端接口需要的是ID,所以需要把获取的数组转成只有id的数组传给后端
      this.multipleSelection = this.multipleSelection.map(r =>
        r.id
      )
    },
  },
  mounted() {
    // 调用接口把参数给进去
    this.getAdminlist(this.limit)
  },


}
</script>
<style lang="scss" scoped>
.ManagerList {
  &::v-deep .el-table th.el-table__cell>.cell {
    text-align: center;
  }

  &::v-deep td,
  th .cell {
    text-align: center;
  }
}
</style>